<template>
    <div class="dashboard-editor-container">
        <panel-group :v-if="groupFign" :lineChartData="lineChartData" @handleSetLineChartData="handleSetLineChartData" />


        <el-row :gutter="0">
            <el-col :xs="24" :sm="24" :lg="6">
                <div class="chart-wrapper">
                    <pie-chart :lists="lists" />

                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="10">
                <div class="chart-wrapper">
                    <ciyun></ciyun>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8">
                <div class="chart-wrapper">
                    <ci></ci>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="0">
            <el-col :xs="24" :sm="24" :lg="24">
                <div class="chart-wrapper">
                    <graph></graph>

                </div>
            </el-col>
            <!-- <el-col :xs="24" :sm="24" :lg="9">
                <div class="chart-wrapper">
                    d
                </div>
            </el-col> -->
            <!-- <el-col :xs="24" :sm="24" :md="12" :lg="9">
                <div class="chart-wrapper">
                    <el-card class="update-log ">
                        <div slot="header" class="clearfix" style="font-weight: bolder; font-size: 18px">
                            <span>公告</span>
                        </div>
                        <div class="block">
                            <el-timeline>
                                <el-timeline-item v-for="(noticeG) in noticeGList" :key="noticeG.key"
                                    :timestamp="noticeG.createTime" placement="top">
                                    <el-card>
                                        <el-button size="medium" style="float: right;" type="text" icon="el-icon-view"
                                            @click="openNodeHtml(noticeG)"></el-button>
                                        <p>{{ noticeG.noticeTitle }}</p>
                                    </el-card>
                                </el-timeline-item>

                            </el-timeline>
                        </div>
                    </el-card>

                    <el-card class="update-log" style="margin-top: 30px;">
                        <div slot="header" class="clearfix" style="font-weight: bolder; font-size: 18px">
                            <span>通知</span>
                        </div>
                        <div class="block">
                            <el-timeline>
                                <el-timeline-item v-for="(noticeT) in noticeTList" :key="noticeT.key"
                                    :timestamp="noticeT.createTime" placement="top">
                                    <el-card>
                                        <el-button size="medium" style="float: right;" type="text" icon="el-icon-view"
                                            @click="openNodeHtml(noticeT)"></el-button>
                                        <p>{{ noticeT.noticeTitle }}</p>
                                    </el-card>
                                </el-timeline-item>

                            </el-timeline>
                        </div>
                    </el-card>
                </div>
            </el-col> -->
        </el-row>
        <node-html v-if="openNodeIf" :title="title" :openNode="openNode" :graphNodeUrl="graphNodeUrl"
            @closeNodeHtml="closeNodeHtml"></node-html>
    </div>
</template>
  
<script>

import ciyun from "./graph/ciyun1.vue";
import graph from "./graph/GraphModel2.vue";
import PanelGroup from "./dashboard/PanelGroup";
import LineChart from "./dashboard/LineChart";
import RaddarChart from "./dashboard/RaddarChart";
import PieChart from "./dashboard/PieChart";
import BarChart from "./dashboard/BarChart";
 
import ci from "./graph/ciyun3.vue";
import NodeHtml from "./tool/NodeHtml.vue";
import { listNotice } from "@/api/system/notice";
 
import { alList } from "@/api/system/index";
import { shanList } from "@/api/system/index";
export default {
    name: "Index",
    components: {
        ci,
        PanelGroup,
        LineChart,
        RaddarChart,
        PieChart,
        BarChart, graph, ciyun, NodeHtml
    },
    data() {
        return {
            lists: [
                { value: 320, name: 'Industries' },
                { value: 240, name: 'Technology' },
                { value: 149, name: 'Forex' },
                { value: 100, name: 'Gold' },
                { value: 59, name: 'Forecasts' }
            ],
            openNode: false,
            openNodeIf: false,
            noticeGList: [],
            noticeTList: [],
            groupFign: false,
            chartData: {},
            lineChartData: {
                newVisitis: {
                    actualData: null
                },
                messages: {
                    actualData: null
                },
                purchases: {
                    actualData: null
                },
                shoppings: {
                    actualData: null
                }
            }

        };
    },
    created() {

        this.getList();
        this.getNoticeGList();
        this.getNoticeTList();
        this.getalList()
        this.getshanList()
    },
    methods: {
        getshanList() {
            shanList().then(response => {
             

            });
        },
        getalList() {
            alList().then(response => {
                this.lineChartData = response.data

            });
        },
        getNoticeGList() {
            let queryParam = {
                pageNum: 1,
                pageSize: 10,
                noticeType: 2,
            };
            listNotice(queryParam).then(response => {
                this.noticeGList = response.rows;
            });
        },
        /** 查询公告列表 */
        getNoticeTList() {
            let queryParam = {
                pageNum: 1,
                pageSize: 10,
                noticeType: 1,
            };
            listNotice(queryParam).then(response => {
                this.noticeTList = response.rows;
            });
        },
        handleSetLineChartData(type) {
            this.lineChartData = this.chartData[type];
        },
        getList() {

        },
        //打开弹窗
        openNodeHtml(data) {
            this.graphNodeUrl = data.noticeContent;
            this.title = data.createTime + "-" + data.noticeTitle;
            this.openNodeIf = true;
            this.openNode = true;
        },
        //关闭弹窗
        closeNodeHtml() {
            this.openNode = false;
            this.openNodeIf = false;
            // this.getList();
        },
    },
};
</script>
  
<style lang="scss" scoped>
.dashboard-editor-container {
    padding: 13px;
    background-color: rgb(226, 234, 245);
    position: relative;
}

.chart-wrapper {
    background: rgb(247, 247, 247);
    padding: 16px 16px 0;
    margin-bottom: 32px;
}

@media (max-width: 1024px) {
    .chart-wrapper {
        padding: 8px;
    }
}
</style>